import React, {Component} from 'react';
import {View, StyleSheet, ViewPropTypes, TouchableOpacity, Image, Text, TextInput,ScrollView} from 'react-native';
import PropTypes from "prop-types";
import Device from "@greens/device/src/device";

export default class ItemTextArea extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.value,
            wordsCounterText: this.props.value ? this.props.value.length + '/' + this.props.maxLength : '0/' + this.props.maxLength,
            forceUpdate: 0
        };
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.value !== prevState.value || prevState.forceUpdate) {
            if (prevState.forceUpdate) {
                return prevState
            } else {
                return nextProps
            }
        }
        // 否则，对于state不进行任何操作
        return null;
    }

    render() {
    	let containerStyle = styles.container;
    	let mainStyle = styles.main;
    	if (this.props.editable == false){
			containerStyle = Object.assign({},containerStyle,{height:'auto'})
			mainStyle = Object.assign({},mainStyle,{height: 'auto'})
		}
        return (
            <View style={containerStyle}>
                <View style={mainStyle}>
					{
						this.props.editable?<TextInput
							style={[{
								paddingTop: 10,
								paddingLeft: 15,
								paddingRight: 15,
								paddingBottom: 10,
								width: Device.SCREEN_WIDTH - 30,
								height: this.props.editable ? (Device.SCREEN_WIDTH - 30) / 2.875 : (Device.SCREEN_WIDTH - 30) / 2.875 + 17.5,
								textAlignVertical: 'top',
								textAlign: 'left',
								color: '#333333',
								fontSize: 15,
							}, this.props.textInputStyle]}
							multiline={true}
							maxLength={this.props.maxLength}
							underlineColorAndroid="transparent"
							clearButtonMode={'while-editing'}
							onChangeText={text => {
								if (this.props.onChangeText) {
									this.props.onChangeText(text);
								}
								this.setState({
									value: text,
									wordsCounterText: text.length + '/' + this.props.maxLength,
									forceUpdate: 1
								})
							}}
							onEndEditing={event => {
								if (this.props.onEndEditing) {
									this.props.onEndEditing(event);
								}
							}}
							onBlur={(event) => {
								if (this.props.onBlur) {
									this.props.onBlur(event);
								}
							}}
							placeholder={this.props.placeholder ? this.props.placeholder : `请输入不超过${this.props.maxLength}字`}
							defaultValue={this.state.value}
							placeholderTextColor="#C8C8C8"
							returnKeyType="done"
							editable={this.props.editable}
						/>:
							<Text style={[{
								paddingTop: 10,
								paddingLeft: 15,
								paddingRight: 15,
								paddingBottom: 10,
								width: Device.SCREEN_WIDTH - 30,
								//height: this.props.editable ? (SCREEN_WIDTH - 30) / 2.875 : (SCREEN_WIDTH - 30) / 2.875 + 17.5,
								textAlignVertical: 'top',
								textAlign: 'left',
								color: '#333333',
								fontSize: 15,
							}, this.props.textInputStyle]}>{this.state.value}</Text>
					}

                    {this.props.editable &&
                    <Text
                        style={[{
                            fontSize: 14,
                            color: '#C8C8C8',
                            textAlign: 'right',
                            width: Device.SCREEN_WIDTH - 30,
                            height: 17.5,
                            marginTop: 5,
                            marginRight: 15,
                            marginBottom: 10,
                            alignSelf: 'flex-end',
                        }, this.props.countViewStyle]}
                    >{this.state.value ? this.state.value.length + '/' + this.props.maxLength : '0/' + this.props.maxLength}</Text>
                    }
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#FFFFFF',
        width: Device.SCREEN_WIDTH,
        height: 18 + (Device.SCREEN_WIDTH - 30) / 2.875 + 5 + 17.5 + 10 + 18,
    },
    main: {
        borderRadius: 5,
        backgroundColor: '#F6F6F6',
        width: Device.SCREEN_WIDTH - 30,
        height: (Device.SCREEN_WIDTH - 30) / 2.875 + 5 + 17.5 + 10,
        marginLeft: 15,
        marginRight: 15,
        marginTop: 18,
        marginBottom: 18,
    }
});

ItemTextArea.propTypes = {
    placeholder: PropTypes.string,
    value: PropTypes.string,
    textInputStyle: ViewPropTypes.style,
    countViewStyle: ViewPropTypes.style,
    maxLength: PropTypes.number,
    onChangeText: PropTypes.func,
    onEndEditing: PropTypes.func,
    onBlur: PropTypes.func,
    editable: PropTypes.bool,
}

ItemTextArea.defaultProps = {
    maxLength: 200,
    editable: true,
}
